<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true" title="企业内训" />
		<view class="container">
			<!-- banner图 -->
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" :circular="circular" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in bannerList" :key="index" @click="goBannerDetail(item)">
					<image class="images" :src="item.url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="boxWrap" style="margin-top: 40rpx;" @click="handleQiye">
				<view class="neirong">
					<view class="name">企业内训</view>
					<view v-html="sysConfigInfo.neixunDesc"></view>
				</view>

			</view>
			<view class="xial flex">
				 <!-- @click="toggle" -->
				
				<view class="xiali" style="background: none;">
					<image class="xiali_img" src="/static/images/neixun01.png" mode="aspectFill" style="margin-bottom: 40rpx;"></image>
					<view class="xiali_c">企业微信客服</view>
					<contact-button type="default-light"
					  size="27"
					  session-from="weapp"
					  :style="{'left':item.left,'top':item.top,'position':'absolute','opacity':0}"
					  v-for="item in contactList"
					>
					</contact-button>
				</view>
				
				
				<navigator url="/sub_training/pages/classList" class="xiali">
					<image class="xiali_img" src="/static/images/neixun02.png" mode="aspectFill"></image>
					<view class="xiali_c">内训课程信息</view>
				</navigator>
				<navigator url="/sub_training/pages/projectList" class="xiali">
					<image class="xiali_img" src="/static/images/neixun03.png" mode="aspectFill"></image>
					<view class="xiali_c">内训项目信息</view>
				</navigator>
				<view class="xiali" @click="showPartner">
					<image class="xiali_img" src="/static/images/neixun04.png" mode="aspectFill"></image>
					<view class="xiali_c">合作客户展示</view>
				</view>
				<view class="xiali" @click="">
					<image class="xiali_img" src="/static/images/neixun05.png" mode="aspectFill"></image>
					<view class="xiali_c">测评</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<image class="loginimg" src="/static/images/index_09.png" mode="widthFix"></image>
				<view class="qiye1">企业微信客服</view>
				<view class="qiye2">工作日 9:00-18:00在线</view>
				<image class="qiye3" src="/static/images/index_14.png" mode="widthFix"></image>
			</view>
		</uni-popup>
		<!-- 个人信息收集--弹窗 -->
		<collect-info ref="childRef"></collect-info>
	</view>
</template>

<script>
	import CollectInfo from '@/components/collectInfo/index.vue'
	export default {
		components: {
			CollectInfo
		},
		data() {
			return {
				// banner图设置参数
				indicatorDots: true,
				circular: true,
				autoplay: true,
				interval: 1500,
				duration: 500,
				bannerList: [],
				contactList:[
					{top:'0',left:'0'},
					{top:'50rpx',left:'0'},
					{top:'100rpx',left:'0'},
					{top:'150rpx',left:'0'},
					{top:'200rpx',left:'0'},
					{top:'0',left:'60rpx'},
					{top:'0',left:'120rpx'},
					{top:'0',left:'180rpx'},
					{top:'0',left:'240rpx'},
					{top:'0',left:'300rpx'},
					{top:'50rpx',left:'60rpx'},
					{top:'50rpx',left:'120rpx'},
					{top:'50rpx',left:'180rpx'},
					{top:'50rpx',left:'240rpx'},
					{top:'50rpx',left:'240rpx'},
					{top:'50rpx',left:'300rpx'},
					{top:'100rpx',left:'60rpx'},
					{top:'100rpx',left:'120rpx'},
					{top:'100rpx',left:'180rpx'},
					{top:'100rpx',left:'240rpx'},
					{top:'100rpx',left:'240rpx'},
					{top:'100rpx',left:'300rpx'},
					{top:'200rpx',left:'60rpx'},
					{top:'200rpx',left:'120rpx'},
					{top:'200rpx',left:'180rpx'},
					{top:'200rpx',left:'240rpx'},
					{top:'200rpx',left:'240rpx'},
					{top:'200rpx',left:'300rpx'},
					{top:'150rpx',left:'60rpx'},
					{top:'150rpx',left:'120rpx'},
					{top:'150rpx',left:'180rpx'},
					{top:'150rpx',left:'240rpx'},
					{top:'150rpx',left:'240rpx'},
					{top:'150rpx',left:'300rpx'},
				],
				sysConfigInfo:{}
			}
		},
		onShow() {
			this.getBanner()
			this.getSysConfigFun() //获取系统配置
		},
		methods: {
			// 获取banner列表
			getBanner(){
				this.sjuRequest("wx/banners/getBannerByPosition", 'POST', {
					position:3
				}).then(res => {
					console.log(res)
					this.bannerList = res.data
				})
			},
			// 跳转banner详情
			goBannerDetail(item){
				uni.navigateTo({
					url: '/sub_common/pages/bannerDetail?id='+item.id
				})
			},
			editInfo() {
				uni.showToast({
					title: '编辑信息',
					icon: 'none'
				});
			},
			changePwd() {
				uni.showToast({
					title: '修改密码',
					icon: 'none'
				});
			},
			toggle(type) {
				this.$refs.popup.open()
			},
			handleQiye(){
				// 点击企业内训需要做一个判断：是否登录并填写个人信息；没有登录的话，就跳个人中心；，没有填个人信息的话，就弹个人信息框
				if(!uni.getStorageSync('token')){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					setTimeout(function(){
						uni.switchTab({
							url:'/pages/tab/my/my'
						})
					},1000)
				}else if(!uni.getStorageSync('isUserUpdateFlag')){
					this.$refs.childRef.showTan('center')
				}
			},
			getSysConfigFun(){
				this.sjuRequest("/wx/sysConfig/getSysConfig", 'POST', {}).then(res => {
					console.log('获取系统配置')
					// this.bannerList = res.data
					console.log(res)
					this.sysConfigInfo = res.data
				})
			},
			// 点击合作客户展示
			showPartner(){
				uni.downloadFile({
					url: this.sysConfigInfo.cooperFileUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
						});
					},
					complete: function(r) {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #f5f6fa;
		padding-bottom: 0;
	}

	/* 轮播图 */
	.swiper {
		$swiper-width: 100%;
		$swiper-height: 300rpx;
		width: $swiper-width;
		height: $swiper-height;
		margin-bottom: 20rpx;
		swiper-item {
			width: $swiper-width;
			height: $swiper-height;

			image {
				width: $swiper-width;
				height: $swiper-height;
			}
		}
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx #eee;
		margin-bottom: 40rpx;
		padding: 40rpx 0;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.profile-card .avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
		color: #2d4ed6;
		width: 90%;
		margin-bottom: 10rpx;
	}

	.company {
		color: #666;
		margin-bottom: 20rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		color: #666;
		margin-bottom: 10rpx;
	}

	.edit-btn {
		color: #fff;
		margin: 30rpx 0 10rpx 0;
		width: 60%;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin-bottom: 20rpx;
		margin-top: 0;
	}

	.pwd-btn {
		background: #ff9800;
		color: #fff;
		width: 60%;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.enroll-card {
		padding: 30rpx 20rpx;
	}

	.enroll-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #2d4ed6;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		width: 100%;
	}

	.enroll-title .iconfont {
		color: #ff9800;
		margin-right: 10rpx;
	}

	.enroll-item {
		width: 90%;
		margin: 0 auto;
		background: #f7f8fa;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.course-title {
		font-size: 32rpx;
		color: #2d4ed6;
	}

	.course-price {
		color: #222;
		margin: 8rpx 0;
	}

	.course-status {
		color: #888;
		font-size: 26rpx;
	}

	.banner {
		width: 750rpx;
		height: 400rpx;
		display: block;
	}

	.neirong {
		width: 100%;
		height: auto;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
	}

	.xial {
		width: 720rpx;
		margin: 30rpx auto;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.xiali {
		width: 350rpx;
		height: 260rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding:50rpx 20rpx;
		box-sizing: border-box;
		text-align: center;
		box-shadow: 8rpx 8rpx 8rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.xiali_img {
		width: 100rpx;
		height: 100rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.popup-success {
			color: #fff;
			background-color: #e1f3d8;
		}
		.popup-content{
			width: 600rpx;
			height: auto;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			text-align: center;
			padding-bottom: 40rpx;
		}
		.qiye1{
			width: 100%;
			height: auto;
		}
		.loginimg{
			width: 140rpx;
			height: auto;
			margin: 10rpx auto;
			margin-bottom: 0;
		}
		.qiye1{
			font-size: 30rpx;
			color: #82b799;
			margin-bottom: 10rpx;
		}
		.qiye2{
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}
		.qiye3{
			width: 300rpx;
			height: auto;
		}
		.popup-content2{
			width: 600rpx;
			height: 800rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			text-align: center;
			padding-bottom: 40rpx;
			overflow: auto;
		}
			
</style>